<template>
  <div class="iframe">
    <div class="i-title">
      <h3>模板引用</h3>
    </div>
    <div class="i-tip" ref="root" id="my">{{tip2}}</div>
    <div class="i-tip">
      {{str}}
    </div>
  </div>
</template>

<script>
  import {
    ref,
    onMounted,
    onBeforeUpdate
  } from 'vue'
  export default {
    name: "hello",
    setup() {
      const root = ref(null);
      let str = ref("");
      let tip2 = ref("今天是个好天气");
      onMounted(() => {
        // DOM 元素将在初始渲染后分配给 ref
        console.log(root.value, "初始内容");
        str.value = root.value.innerHTML + " , " + root.value.id;
      })
      // 确保在每次更新之前重置ref
      onBeforeUpdate(() => {
        // DOM 元素将在初始渲染后分配给 ref
        console.log(root.value, "更新内容");
        str.value = root.value.innerHTML + " , " + root.value.id;
      })
      setTimeout(() => {
        tip2.value = "明天可能会下雨"
      }, 2000)
      return {
        root,
        str,
        tip2
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
